<template>
    <div>
        <el-row>
            <el-col :span="2">
                订单种类：
            </el-col>
            <el-col :span="6">
                执行手动续期
            </el-col>
            <el-col :span="2">
                卡号数量：
            </el-col>
            <el-col :span="4">
                2
            </el-col>
            <el-col :span="3">
                <span class="vb">时租</span>
                时间：
            </el-col>
            <el-col :span="4">
                2018-05-29 14:42:20
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2">
                <span class="vb">租</span>
                操作员：
            </el-col>
            <el-col :span="6">
                苏州金龙
            </el-col>
            <el-col :span="2">
                <span class="vb">租</span>
                总金额：
            </el-col>
            <el-col :span="4">
                -20.0
            </el-col>
            <el-button type="primary" class="fr">导出明细</el-button>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column label="ICCID" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.iccid}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dangwei" label="套餐档位" width="200">
            </el-table-column>
            <el-table-column label="当前服务结束时间" width="180">
                <template slot-scope="scope">
                    {{ scope.row.current_time}}
                </template>
            </el-table-column>
            <el-table-column label="续期服务结束时间" width="180">
                <template slot-scope="scope">
                    {{ scope.row.xu_time}}
                </template>
            </el-table-column>
            <el-table-column prop="circle" label="套餐周期" width="100">
            </el-table-column>
            <el-table-column prop="price" label="套餐价额" width="100">
            </el-table-column>
            <el-table-column prop="fee" label="金额">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        iccid: '8986031630200231575',
                        dangwei: '10MB流量套餐',
                        current_time: '2019-01-31 23:59:59',
                        xu_time: '	2019-03-31 23:59:59',
                        circle: '2',
                        price: '5.0',
                        fee: '-10.0'
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-row {
        .el-col {
            font-size: 14px;
            padding: 15px 0px;
        }
        .el-col:nth-of-type(2n + 1) {
            font-weight: bold;
            text-align: left;
        }
        .el-col:nth-of-type(2n) {
            padding-left: 15px;
        }
    }
    .fr {
        float: right;
    }
    .vb {
        visibility: hidden;
    }
</style>